<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <div>
        <!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->
        <router-link to="/home">Go to Home</router-link>
        <router-link to="/about">Go to About</router-link>
    </div>
    <!-- 5、在页面上使用<router-view></router-view>标签，用于渲染匹配的组件 -->
    <router-view></router-view>
    姓:<input v-model="firstName"/>
    名:<input v-model="lastName"/>
    <div>{{fullName}}</div>
    <div>{{count}}</div>

    <div>
        <input v-model="task"/><button @click="sub1()">submit</button>
    </div>
    <ul>
       <!-- <li v-for="(item,index) in taskList " :key="index">{{item}}</li>-->
        <todo-item2 v-for="(item,index) in taskList" :key="index" :item="item">

        </todo-item2>
        <todo-item v-for="(item,index) in taskList" :key="index" :item="item" :index="index"
        @delete="handleDeleteById">

        </todo-item>
    </ul>

</div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/vue.router.min.js"></script>
    <script>
        /* 1、创建组件 */
        const Home = Vue.extend({
            template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
            data: function() {
                return {
                    msg: 'Hello, vue router!'
                }
            }
        });
        const About = Vue.extend({
            template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
        });
        const  index =Vue.extend({
            template: '<div><h1>Home:</h1><p>{{ name }}</p></div>',
            data: function () {
                return{
                    name:'index'
                }
            }
        })


        // 2. 创建 router 实例，然后传 `routes`路由映射 配置
        const router = new VueRouter({
            routes: [
                { path: '/home', component: Home },
                { path: '/about', component: About },
                { path: '/', component: index } //设置默认路径
            ]
        });
       Vue.component(
           'todo-item',{
               props: ['item'],
               template: '<li @click="handleDelete">{{item}}</li>',
               methods: {
                   handleDelete:function () {
                        this.$emit('delete',this.index);
                   }
               }
           }
       )
        var localComponent={
            props:['item'],
            template:'<li>{{item}}</li>'
        }


        // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
        const vm = new Vue({
            router: router,
            data:{
                firstName:"",
                lastName:"",
                count:0,
                task:"",
                taskList:[]
            },
            computed:{
                fullName:function () {
                    return this.firstName+ "  " + this.lastName
                }
            },
            watch:{
                firstName: function () {
                    this.count++
                },
                lastName: function () {
                    this.count++
                }

            },
            methods:{
                sub1(){
                    if (this.task===""){
                        return
                    }
                    this.taskList.push(this.task)
                    this.task=""
                },
                handleDeleteById(index1,index2){
                    this.taskList.splice(index1,1);
                }
            },
            components:{
                "todo-item2":localComponent,

            }


        }).$mount('#app');
        // 现在，应用已经启动了！恭喜
    </script>
</body>
</html>
